body {
    font-size: 62.5%;
}

table {
    font-size: 1em;
}

/* Site
-------------------------------- */

body {
    font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
}

/* Layout
-------------------------------- */

.layout-grid {
    width: 100%;
}

.layout-grid td {
    vertical-align: top;
}

.layout-grid td.left-nav {
    width: 140px;
}

.layout-grid td.normal {
    border-left: 1px solid #eee;
    padding: 20px 24px;
    font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
}

.layout-grid td.demos {
    background: url('/images/demos_bg.jpg') no-repeat;
    height: 337px;
    overflow: hidden;
}



/* Demos */

.demos-nav, .demos-nav dt, .demos-nav dd, .demos-nav ul, .demos-nav li {
    margin: 0;
    padding: 0
}

.demos-nav {
    float: left;
    width: 170px;
    font-size: 1.3em;
}

.demos-nav dt,
.demos-nav h4 {
    margin: 0;
    padding: 0;
    font: normal 1.1em "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
    color: #e87b10;
}

.demos-nav dt,
.demos-nav h4 {
    margin-top: 1.5em;
    margin-bottom: 0;
    padding-left: 8px;
    padding-bottom:5px;
    line-height: 1.2em;
    border-bottom: 1px solid #F4F4F4;
}

.demos-nav dd a,
.demos-nav li a {
    border-bottom: 1px solid #F4F4F4;
    display:block;
    padding: 4px 3px 4px 8px;
    font-size: 90%;
    text-decoration: none;
    color: #555 ;
    margin:2px 0;
    height:13px;
}

.demos-nav dd a:hover,
.demos-nav dd a:focus,
.demos-nav dd a:hover,
.demos-nav dd a:focus {
    background: #f3f3f3;
    color:#000;
    -moz-border-radius: 5px; -webkit-border-radius: 5px;
}
.demos-nav dd a.selected {
    background: #555;
    color:#ffffff;
    -moz-border-radius: 5px; -webkit-border-radius: 5px;
}

#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }

.demos-list, .demos-list dt, .demos-list dd, .demos-list ul, .demos-list li {
    margin: 0;
    padding: 0
}

.demos-list {
    float: left;
    width: 100%;
    font-size: 1.3em;


}



.demos-list dt,
.demos-list h4 {
    margin-top: 1.5em;
    margin-bottom: 0;
    padding-left: 8px;
    padding-bottom:5px;
    line-height: 1.2em;
    border-bottom: 1px solid #F4F4F4;
}

.demos-list    li {

    display:block;
    border: 1px solid #F4F4F4;
    padding: 4px 3px 4px 8px;
    font-size: 90%;
    text-decoration: none;
    color: #555 ;
    margin:2px 0;
    height:25px;
    background-color:expression(this.sourceIndex%2==0?'#EAF8FD':'#ffffff');
}
.demos-list li a {
  
    width:50px;
    border: 1px solid #F4F4F4;
    padding: 4px 3px 4px 8px;
    font-size: 90%;
    text-decoration: none;
    color: #555 ;
    margin:2px 0;
    height:13px;
}

.demos-list  li a:hover,
.demos-list  li a:focus,
.demos-list  li a:hover,
.demos-list  li a:focus {
    background: #f3f3f3;
    color:#000;
    -moz-border-radius: 5px; -webkit-border-radius: 5px;
}
.demos-list  li a.selected {
    background: #555;
    color:#ffffff;
    -moz-border-radius: 5px; -webkit-border-radius: 5px;
}

.div-box{
    border: 1px solid #FF8E00;
    padding: 5px 5px 5px 5px;
    font-size: 90%;
    width:100%;
    color: #555 ;
    margin:30px 4px 4px 4px;
    font-size: 125%;
}
.div-box h3{
    margin: 0;
    padding: 0px 0px 0px 10px;
}
.div-box p{
    margin: 0;
    padding: 0px 0px 0px 10px;
}
.div-box hr{
    border: 1px solid #FF8E00;
    width:98%;
}
